<template>
  <div class="content">
    <div class="bg6">
      <img class="bg6" src="../../assets/ProductionQuality.png" alt="" />
      <div class="RunningState">
        <div ref="RunningBoxfMain" class="RunningBoxfMain"></div>
      </div>
      <div class="OutputRanking">
        <div ref="letfMain" class="letfMain"></div>
      </div>
      <div class="MachineStart">
        <div ref="MachineStartMain" class="MachineStartfMain"></div>
      </div>
      <div class="yield">
        <div ref="yieldMain" class="yieldMain"></div>
      </div>
      <div class="tableList">
        <table
          border="1"
          cellspacing="0"
          width="95%"
          height="90%"
          style="color: #fff; position: absolute; top: 10px"
        >
          <tr style="height: 40px">
            <td>楼层</td>
            <td>组别</td>
            <td>班次</td>
            <td>疵布重量</td>
            <td>个人疵有率</td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr style="height: 28px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import * as echarts from 'echarts'
const RunningBoxfMain = ref<any>()
const letfMain = ref<any>()
const MachineStartMain = ref<any>()
const MachineStartInit = ref<any>()
const yieldMain = ref<any>()
let yieldInit = null
let RunningBoxInit = null
let myChartInit = null

const getEcharts = () => {
  myChartInit = echarts.init(letfMain.value)
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23',
        '24',
        '25',
        '26',
        '27',
        '28',
        '29',
        '30',
      ],
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
      axisLabel: {
        interval: 0, //代表显示所有x轴标签显示
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
    },
    color: ['#52fcfc'],
    grid: {
      top: '15%',
      right: '5%',
      left: '8%',
      bottom: '15%',
    },
    series: [
      {
        data: [
          90, 30, 40, 80, 70, 90, 30, 40, 80, 70, 90, 30, 40, 80, 70, 90, 30, 40, 80, 70, 90, 30,
          40, 80, 70, 90, 30, 60, 80, 70,
        ],
        type: 'bar',
        barWidth: '50%',
        itemStyle: {
          normal: {
            label: {
              formatter: '{c}' + '%',
              show: true,
              position: 'top',
              textStyle: {
                fontSize: '10',
                color: '#fff',
              },
            },
          },
        },
      },
    ],
  }
  myChartInit.setOption(option)
}
const getEcharts1 = () => {
  MachineStartInit.value = echarts.init(MachineStartMain.value)
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '18%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: [
          '1',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8',
          '9',
          '10',
          '11',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '18',
          '19',
          '20',
          '21',
          '22',
          '23',
          '24',
          '25',
          '26',
          '27',
          '28',
          '29',
          '30',
        ],
        axisLine: {
          lineStyle: {
            color: '#ffffffbf',
            width: 2,
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#ffffffbf',
            width: 2,
          },
        },
      },
    ],
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: '#62ebf0a6',
        },
        data: [
          36, 60, 80, 66, 36, 36, 88, 66, 66, 36, 36, 88, 66, 66, 36, 36, 88, 66, 66, 36, 36, 88,
          66, 66, 36, 36, 88, 88, 66, 36,
        ],
      },
      {
        name: 'Email1',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: '#0a7afb75',
        },
        data: [
          90, 30, 40, 80, 70, 90, 30, 40, 80, 70, 90, 30, 40, 80, 70, 90, 30, 40, 80, 70, 90, 30,
          40, 80, 70, 90, 30, 60, 80, 70,
        ],
      },
    ],
  }
  MachineStartInit.value.setOption(option)
}
const getEcharts2 = () => {
  yieldInit = echarts.init(yieldMain.value)
  let option = {
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0, //代表显示所有x轴标签显示
      },
      data: [
        '布种1',
        '布种2',
        '布种3',
        '布种4',
        '布种5',
        '布种6',
        '布种7',
        '布种8',
        '布种9',
        '布种10',
        '布种11',
        '布种12',
        '布种13',
        '布种14',
      ],
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
    },
    color: ['#52fcfc'],
    grid: {
      top: '15%',
      right: '5%',
      left: '8%',
      bottom: '15%',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 120, 200, 150, 80, 70, 120, 200, 150, 80],
        type: 'bar',
        barWidth: '50%',
        itemStyle: {
          normal: {
            label: {
              formatter: '{c}' + '%',
              show: true,
              position: 'top',
              textStyle: {
                fontSize: '10',
                color: '#fff',
              },
            },
          },
        },
      },
    ],
  }
  yieldInit.setOption(option)
}
const getEcharts3 = () => {
  RunningBoxInit = echarts.init(RunningBoxfMain.value)
  let option = {
    tooltip: {
      trigger: 'axis',
      // formatter: (params: any) => {
      //   console.log(params[0])
      //   return (
      //     '日期：' +
      //     params[0].axisValue +
      //     '<br/>' +
      //     params[0].data
      //   )
      // },
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0, //代表显示所有x轴标签显示
      },
      data: [
        '1组',
        '2组',
        '3组',
        '4组',
        '5组',
        '6组',
        '7组',
        '8组',
        '9组',
        '10组',
        '11组',
        '12组',
        '13组',
        '14组',
        '15组',
      ],
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#ffffffbf',
          width: 2,
        },
      },
    },
    color: ['#52fcfc'],
    grid: {
      top: '15%',
      right: '5%',
      left: '8%',
      bottom: '10%',
    },
    series: [
      {
        data: [66, 33, 46, 80, 70, 66, 33, 46, 80, 70, 66, 33, 46, 80, 90, 90],
        type: 'bar',
        barWidth: '50%',
        itemStyle: {
          normal: {
            label: {
              formatter: '{c}' + '%',
              show: true,
              position: 'top',
              textStyle: {
                fontSize: '10',
                color: '#fff',
              },
            },
          },
        },
      },
    ],
  }
  RunningBoxInit.setOption(option)
}
onMounted(() => {
  getEcharts()
  getEcharts1()
  getEcharts2()
  getEcharts3()
})
</script>
  <script lang="ts">
export default defineComponent({
  name: 'kanbanOfWeavingFactory',
})
</script>
  <style scoped>
.content {
  background-color: #fff;
  height: 100%;
  width: 100%;
}
.bg6 {
  width: 100%;
  height: 99.5%;
  position: relative;
}
.RunningState {
  width: 48%;
  height: 47.5%;
  position: absolute;
  z-index: 100;
  top: 12%;
  left: 2.5%;
  box-sizing: border-box;
  display: flex;
}
.RunningBox {
  width: 85%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
}
.RunningLeft {
  width: 15%;
  height: 100%;
}
.kuai {
  background: #5cc6e5;
  width: 5px;
  height: 20px;
  display: block;
}
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex {
  display: flex;
}
.fff {
  color: #fff;
}
.yujin {
  margin-left: 8px;
  font-size: 16px;
}
.RunningStateContent {
  color: #6880a2;
  flex-flow: row wrap;
  margin-top: 10px;
}
.title {
  position: absolute;
  top: -3%;
  color: #2cd6c5;
  z-index: 10;
  left: 3%;
}
.boxContent {
  width: 20%;
  height: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.box {
  width: 60px;
  height: 70px;
  background: #52fcfc;
  border-radius: 3px;
  margin-bottom: 2px;
}
.text {
  margin-top: 2px;
  color: #fff;
}
.runningText {
  color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
.runTect {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  color: #fff;
}
.runBox {
  width: 18px;
  height: 18px;
  background: #52fcfc;
  margin-right: 8px;
  border-radius: 2px;
}
.juhong {
  background: #fc5252;
}
.juhuang {
  background: #fdf852;
}
.juhui {
  background: #9d9d9d;
}
.OutputRanking {
  width: 46.5%;
  height: 27.5%;
  position: absolute;
  top: 12%;
  left: 51.5%;
  box-sizing: border-box;
  display: flex;
}
.MachineStart {
  width: 46.5%;
  height: 27.5%;
  position: absolute;
  top: 41%;
  left: 51.5%;
  box-sizing: border-box;
  display: flex;
}
.yield {
  width: 46.5%;
  height: 27%;
  position: absolute;
  top: 70%;
  left: 51.5%;
  box-sizing: border-box;
  display: flex;
}
.tableList {
  width: 48.5%;
  height: 34.5%;
  position: absolute;
  top: 61.5%;
  left: 2%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow-x: auto;
}
div::-webkit-scrollbar { /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
}
.OutputRankingMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}
.yieldMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}
.RunningBoxfMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}
.letfMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}
.MachineStartfMain {
  width: 100%;
  height: 100%;
  z-index: 100;
}

.ranText {
  position: absolute;
  top: -6%;
  color: #2cd6c5;
  z-index: 10;
  right: 2%;
}
.ranText1 {
  position: absolute;
  top: 4%;
  color: #2cd6c5;
  right: 2%;
}
</style>
  